NodeJS的動態網站概念-6

第 11 屆 iThome 鐵人賽

DAY 24

Modern Web

網站前端後端與API系列第 24 篇

11th鐵人賽

BigQ

2019-10-10 21:30:24

4113 瀏覽

分享至

我們學會了Response一個頁面的方法，res.render，做出了不同網頁的效果，那可以回應網頁以外的東西嗎？
可以的，我們回應一個附件試試看。

下載檔案

不是指說又要下載什麼，是我們做一個檔案下載的範例，這也是很常用的功能。
我們在public/images/中，新增一個檔案叫做12321.png

接著，在index.js中，增加一段新的route

router.get('/downloadimg', function(req, res, next) {
	res.download('public/images/12321.png')
})

方法一樣是get，接收要求的路徑改為/downloadimg，res回應的方式改為res.download，後面加上檔案路徑。
存檔，啟動伺服器，我們試著輸入網址：

http://localhost:3000/downloadimg

哇，下載了一個檔案，12321.png
下載的功能就這樣完成了，你問我為什麼知道res.後面可以接download?而download後面的用法是附上檔案位置？
這就要參考Express的API文件了，其他的res用法也可以參考。

增加網頁超連結

我們下載東西，通常是在網頁中下載，我們試試看這樣的功能，打開views中熟悉的index.ejs，增加以下兩行程式碼在body內：

    <a href="http://localhost:3000/downloadimg">下載圖片</a>
    <a href="http://localhost:3000/30days">第二頁網頁</a>

存檔後，開啟呼叫index.ejs的位置localhost:3000/，會看到新增了兩個超連結

點點看，效果是不是跟想像的一樣呢！恭喜完成下載與多頁面的功能了。
<a></a>的用法就是超連結，把超連結目標放在a的屬性href內，把顯示的內容(不一定是文字)放在<a>中間</a>

附上index.ejs程式碼

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <!-- 導入js文件 -->
    <!-- <script type='text/javascript' src='script.js'></script> -->
  </head>
  <body>
    <!-- 修改我們的參數呼叫 -->
    <h1><%= title %></h1>
    <p>Welcome to <%= ironMan30 %><%= theTweenty %></p>
    <h2><%= haha %></h2>
    <!-- 新增超連結 -->
    <a href="http://localhost:3000/downloadimg">下載圖片</a>
    <a href="http://localhost:3000/30days">第二頁網頁</a>
    <div>
    <!-- 新增在<div>的內容 -->
   	  <h2>鐵人30天 h2代表heading標題樣式2</h2>
   	  <p>p代表段落文字 paragraph of text</p>
  	  <!-- 以下新增第二個<div> -->
  	  <!-- 新增一個id="onlyID" -->
   	  <div class="inside" id="onlyId">
   		<h3>鐵人30天 h3是更小一點的大標題</h3>
   		<p>p一樣是代表文字喔！</p>
   		<!-- 新增一個網頁按鈕 -->
   		<button type="button" onclick="myJSFunction()"> 網頁按鈕</button>
      </div>
      <!-- 再新增一個inside -->
      <div class="inside" >
   		<h3>我們又新增了一個class inside的div</h3>
   		<p>p一樣是代表文字喔！</p>
      </div>
      <!-- 增加<a>的超連結  -->
      <a href="https://ithelp.ithome.com.tw/articles/10222155">30天挑戰文章超連結</a>
    </div>

    <!-- 再新增第二個inside在這 -->
    <div class="inside">
      <h3>我們又新增了第二個class inside的div</h3>
      <!-- 把原本的<p>內容改掉，增加id -->
   	  <p id="addResult">numberAdd成果會在這喔</p>
   	  <!-- 加法按鈕 -->
   	  <button type="button" onclick="numberAdd()"> +1按鈕</button>

    </div>
  </body>
  <!-- 新增一個JS語言撰寫區 -->
  <script>
  	// JS內容寫在這 
  	// alert('還沒30天我已經學會了HTML與CSS啦！')
  	function myJSFunction(){
  		document.getElementById("onlyId").innerHTML = "<h2>按下按鈕替換id='onlyId'後的內容</h2>"
  	}

  	var n = 0;
  	function numberAdd(){
  	  n = n+1

  	  // 增加一個for迴圈
  	  for (var i = 0; i < n; i++) {
  	    document.getElementById("addResult").innerHTML += "i:"+ i + ",n:" + n + "<br/>"
  	  }
  	  return

  	    	  // 增加一個if else判斷
  	  // if (n == 5){
  	  // 	document.getElementById("addResult").innerHTML = n + "現在是在if裡面"
  	  // } else if (n == 6){
  	  // 	document.getElementById("addResult").innerHTML = n + "現在是在 else if裡面"
  	  // } else {
  	  // 	document.getElementById("addResult").innerHTML = n
  	  // }

  	  // switch (n) {
  	  // 	case 5:
  	  // 	  document.getElementById("addResult").innerHTML = "現在是在case" + n + "裡"
  	  // 	  break;

  	  // 	case 6:
  	  // 	  document.getElementById("addResult").innerHTML = "而現在是在case" + n + "裡面"
  	  // 	  break;

  	  // 	default:
  	  // 	document.getElementById("addResult").innerHTML = n
  	  // }
  	}


  </script>
</html>

附上index.js程式碼

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { 
  	title: 'Express',
  	haha: '哈哈',
  	ironMan30: '30天鐵人賽',
  	theTweenty: '第20天'
  });
});

/* 增加新的router位置 */
router.get('/30days', function(req, res, next) {
  res.render('index2', { 
  	title: 'Express',
  	haha: '哈哈',
  	ironMan30: '30天鐵人賽',
  	theTweenty: '第20天'
  });
});

router.get('/downloadimg', function(req, res, next) {
	res.download('public/images/12321.png')
})

module.exports = router;